import React, { useState, useRef, useEffect } from "react";
import { Button } from 'antd'
import { predict } from '../../../api/index'
import { reomte_host } from "../../../config";
import { interval } from "../../../config";
import "../styles/index.css"
function Video(props) {
    //属性
    const { passOutput } = props;
    //状态
    const [has, setHas] = useState(false);
    const [img, setImg] = useState(null);
    const [start, setStart] = useState(false);

    const ref = useRef()
    //事件
    //开始检测
    const startHandle = () => {
        setStart(!start)
    }
    //调用截图
    const captureImage = () => {
        if (!has) {
            return
        }
        const canvas = document.createElement("canvas");
        canvas.width = ref.current.videoWidth;
        canvas.height = ref.current.videoHeight;
        canvas.getContext("2d").drawImage(ref.current, 0, 0, canvas.width, canvas.height);

        const image = canvas.toDataURL("image/png");
        setImg(image);
    }
    //调用摄像头
    const getUserMedia = (container) => {
        return new Promise((resolve, reject) => {
            if (navigator.mediaDevices.getUserMedia) {
                navigator.mediaDevices.getUserMedia(container).then(resolve).catch(reject);
            } else if (navigator.webkitGetUserMedia) {
                //webkit
                navigator.webkitGetUserMedia(container, resolve, reject);
            } else if (navigator.mozGetUserMedia) {
                navigator.mozGetUserMedia(container, resolve, reject);
            } else if (navigator.getUserMedia) {
                navigator.getUserMedia(container, resolve, reject);
            }
        })
    }
    //点击调用
    const clickHandle = () => {
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
            || navigator.mozGetUserMedia || navigator.msGetUserMedia || window.getUserMedia

        if (navigator.getUserMedia) {
            getUserMedia({ video: true }).then((res) => {
                console.dir(ref.current)
                ref.current.srcObject = res
                ref.current.play()
                setHas(true)
            }).catch(err => console.log(err))
        }
    }
    //定时上传图片
    const uploadImage = async (file) => {
        const res = await predict({ name: 'file', file }).catch(err => console.log(err));
        const { success, output } = res;
        if (success) {
            passOutput(reomte_host + output)
        }
    }

    useEffect(() => {
        img && uploadImage(img)
    }, [img])

    useEffect(() => {
        let timer = null;
        if (start) {
            //开始检测
            timer = setInterval(captureImage, interval)
        }
        return () => {
            clearInterval(timer)
        }
    }, [start])

    return (
        <div className="display-area">
            <div>
                <Button onClick={clickHandle}>调用摄像头</Button>
                <Button onClick={startHandle} disabled={!has}>{start ? "结束检测" : "开始检测"}</Button>
            </div>

            <video ref={ref}></video>
        </div>
    )
}


export default Video;